<template>
  <div class="container">
    <!-- <div class="box">
      <header class="header">1</header>
      <div class="content">2</div>
    </div> -->
    <!-- 告诉程序 路由 对应的视图的显示位置在这里 -->
    <router-view />
    <footer class="footer" v-if="!$route.meta.hidden">
      <ul>
        <router-link to="/home" tag="li">
          <span class="iconfont icon-shouye"></span>
          <p>首页</p>
        </router-link>
        <router-link to="/kind" tag="li">
          <span class="iconfont icon-leimupinleifenleileibie"></span>
          <p>分类</p>
        </router-link>
        <router-link to="/cart" tag="li">
          <span class="iconfont icon-gouwuche"></span>
          <p>购物车</p>
        </router-link>
        <router-link to="/user" tag="li">
          <span class="iconfont icon-a-wode"></span>
          <p>我的</p>
        </router-link>
      </ul>
    </footer>
    <div class="tip">请将屏幕竖向浏览</div>
  </div>
</template>

<style lang="stylus">
*
  padding 0
  margin 0
  list-style none
html
  // font-size 100px // 所有的平台的头部高度都为44px，底部为50px
  // iphone 6 -- 分辨率 750 * 1334 --- css尺寸 375 * 667
  // 将 100 进行 375 等分 100/375
  // 乘以 100 --- 为了方便计算  100/375 * 100 = 26.6666667
  font-size 26.666667vw // 以iphone6的手机的尺寸来设计的
body
  font-size 12px
html, body, .container
  width 100%
  height 100%
.container
  max-width 960px
  margin 0 auto
  display flex
  flex-direction column
  .box
    flex 1
    display flex
    flex-direction column
    overflow auto
    .header
      height 0.44rem
      background-color #ff6666
    .content
      flex 1
      overflow auto // 保证内容可以产生滚动条
      background-color #f5f5f5
  .footer
    height 0.5rem
    background-color #efefef
    ul
      width 100%
      height 100%
      display flex
      li
        flex 1
        height 100%
        display flex
        flex-direction column
        justify-content center
        align-items center
        &.router-link-active
          color #f66
        span
          font-size 0.24rem
        p
          font-size 0.12rem
.tip
  position fixed
  top 0px
  left 0px
  right 0px
  bottom 0px
  background-color rgba(0, 0, 0, 0.5)
  // 子元素水平垂直居中 - 弹性盒
  display none
  justify-content center
  align-items center
  font-size 30px
  color #fff

// 使用媒体查询可以判断是横屏还是竖屏
@media screen and (orientation landscape) // 横屏  portrait 竖屏
  .tip
    display flex
@media screen and (min-width 960px)
  html
    font-size 100px

</style>
